<template>
	<view class="page">
		<view class="mainBody">
			<view class="header">
				<image class="logoSrc" src="@/static/logos.jpg"
					style="width: 100rpx;height: 100rpx; border-radius: 50%;">
				</image>
				<view class="mainTit" style="font-weight: bold;">欢迎登录金金橙</view>
			</view>
			<view class="formItem">
				<input maxlength="11" type="text" class="input" name="phone" :placeholder="'请输入手机号'"
					v-model="uForm.phone">
			</view>
			<view class="formItem">
				<input type="password" class="input" name="phone" :placeholder="'请输入密码'" v-model="uForm.password">
			</view>

			<view style="display: flex;flex-wrap: wrap; align-items: center; margin-top: 30rpx;font-size: 26rpx;color: #9a9a9a;">
				<u-checkbox-group v-model="checkboxValue" placement="column">
					<u-checkbox :name="1" activeColor="#fe881e" size="26rpx" label="我已阅读并同意">
					</u-checkbox>
				</u-checkbox-group>
				<text style="color: #fe881e;" @click="NAVPAGE('/pages/home/essay/essay?key=YHXY')">《用户协议》</text>和<text
					style="color: #fe881e;" @click="NAVPAGE('/pages/home/essay/essay?key=YSZC')">《隐私政策》</text>
			</view>

			<u-button style="margin-top: 60rpx;background: linear-gradient(180deg, #FD8E1A 0%, #FF7826 100%);"
				type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false" shape="circle"
				class="u-m-t-50" mode="dark" @click="login" :disabled="!isFinishInput">登录</u-button>
			<view class="" style="display: flex; align-items: center; justify-content: space-between;">
				<view class="u-flex u-row-between u-m-t-30" style="margin-top: 20rpx;">
					<view @click="NAVPAGE('/pages/content/passwordLogin/passwordLogin')" hover-class="text-hover"
						:style="{color:'#ccc'}">
						新用户注册</view>
				</view>
				<view style="margin-top: 10rpx;margin-left: 38rpx;">
					<text style="color: #fe881e;" @click="NAVPAGE('/pages/content/forgotPassword/goforgotPassword')">找回密码</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import {
	// 	registerApi
	// } from '../../../api/api';
	import {
		mapActions,
		mapMutations
	} from 'vuex'
	import Ws from '@/utils/socket.js'
	export default {
		data() {
			return {
				checkboxValue: [],
				uForm: {
					phone: '',//
					password: ''//123456
				},
				isFinishInput: true,
				AppName: '',
				errorType: ['none'],
				rules: {
					phone: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}, ],
					password: [{
						min: 6,
						message: '请输入不小于6位数的密码',
					}]
				},

				phone: '',
				password: '',
				code: '', //验证码
				isWechatShow: false,
				devicetoken: '',
				appInfo: {},
				logoSrc: '',
				agreement: true, //是否同意协议
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			uForm: {
				handler(val) {
					if (val.phone && val.password) {
						this.isFinishInput = true
					} else {
						this.isFinishInput = false
					}
				},
				deep: true
			}
		},
		onLoad() {

		},
		methods: {
			...mapActions(['getUserInfos']),
		    ...mapActions('user',['getUserInfo']),
			...mapMutations('user', ['setUserId','setWebSocket','setUserToken']),
			changeAgree(e) {
				this.agreement = e;
			},
			getCid() {

			},
			// 登录
			login(e) {
				if (uni.$u.test.isEmpty(this.uForm.phone)) return uni.$u.toast('请输入账号')
				if (uni.$u.test.isEmpty(this.uForm.password)) return uni.$u.toast('请输入密码')
				if (!this.checkboxValue.length) {
					uni.$u.toast('请勾选用户协议');
					return false;
				}
			this.$api.webLogin({
					phone: this.uForm.phone,
					password: this.uForm.password,
					
				}).then((res) => {
					this.getUserInfos(res.data)
					this.getUserInfo(res.data)
					this.setUserToken(res.data)
					this.getUserInfo(res.data).then(res => {
					 this.setUserId(res.id)
					
					 uni.$u.toast('登录成功');
					 uni.hideLoading()
					 this.setWebSocket(new Ws('wss://jinchengzi.cn/wss', 3000,res.id))
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/tabBarHome/home'
							})
						}, 500)
					})
					// .getUserInfo().then(res => {
					// 	if(res.code == 1){
					// 		commit('update', res.data)
					// 		uni.$u.toast('登录成功')
					// 		setTimeout(() => {
					// 			uni.$u.route({
					// 				url: "/pages/tabBarHome/home",
					// 				type: "reLaunch"
					// 			})
					// 		}, 1000);
					// 	}else{
					// 		this.$toast('登录失败')
					// 	}
					// })
				})

			},

			chooseShopList() {
				get_shop_infoApi({
					name: ''
				}).then(res => {
					let shop = res.data[res.data.length - 1] || {}
					uni.setStorageSync("shop", shop);
				})
			},

			 

			// 获取手机信息

			navigateTo(url, data) {
				this.$navigateTo(url)
			}
			 

		}
	}
</script>

<style lang="scss" scoped>
	// @import "~uview-ui/index.scss";
	page {
		background: #ffffff;
	}

	.page {
		background: #ffffff;
		height: 100%;
	}

	.mainBody {
		padding: 200rpx 80rpx;

		.header {
			text-align: left;
			margin-bottom: 34rpx;
			// margin-top: 100rpx;

			.logoSrc {
				width: 110rpx;
				height: 110rpx;
				border-radius: 200px;
				position: relative;
				box-shadow: 0 0 0 6rpx #FD8E1A88, 0 0 0 14rpx #FF782633;
			}

			.mainTit {
				font-size: 48rpx;
				color: #333333;
				margin: 20rpx 0;
			}

			.subTit {
				font-size: 28rpx;
				color: #666;
				font-weight: 200;
			}
		}
	}

	.logoSrc {
		width: 110rpx;
		height: 110rpx;
		border-radius: 200px;
		position: relative;
		// box-shadow: 0 0 0 6rpx #ffd0d0, 0 0 0 14rpx #ffefef;
		box-shadow: 0 0 0 6rpx #FD8E1A88, 0 0 0 14rpx #FF782633;
	}


	.formItem {
		height: 104rpx;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		align-items: center;

		.area {
			font-size: 30rpx;
			color: #333;
			padding-right: 34rpx;
			line-height: 1;
			border-right: 1rpx solid #9B9B9B;
		}

		.sendCode {
			background-color: transparent;
			color: #EC4849;
		}

		input {
			flex: 1;
			font-size: 30rpx;
			font-weight: 400;

			&.phone {
				padding-left: 33rpx;
			}

			&::-webkit-input-placeholder {
				color: rgba(204, 204, 204, 1);
			}
		}
	}
</style>